import React, {memo} from 'react';
import {Row, Col, Card, DatePicker, Icon, Tooltip} from 'antd';
import {FormattedMessage, formatMessage} from '@/utils/locale';
import styles from './Analysis.less';
import {Pie, WaterWave, Gauge, Field, ChartCard, MiniProgress, MiniBar} from '@/components/Charts';
import Trend from '@/components/Trend';

const {RangePicker} = DatePicker;

const topColResponsiveProps = {
  xs: 24,
  sm: 24,
  md: 24,
  lg: 4,
  xl: 4,
  style: {marginBottom: 24,},
};


const formatRecordData = (data, name) => {
  if (!data) return;
  const result = [];
  let len = data.length, i = len > 30 ? len - 30 : 0;
  if (name === 'mileage_total') {
    for (; i < len; i++) {
      result.push({x: data[i].day, y: parseInt(data[i].value / 1000)})
    }
  } else if (name === 'duration_total') {
    for (; i < len; i++) {
      result.push({x: data[i].day, y: parseInt(data[i].value / 3600)})
    }
  } else {
    for (; i < len; i++) {
      result.push({x: data[i].day, y: data[i].value})
    }
  }

  return result;
};
/**
 * WateWaveCol:是一个 函数，参数WateWaveCol([],loading, query_days, history, onChangeQueryTime)
 * data是数组--数组中每项
 * {
 *     name:
 * }
 */
const WateWaveCol = (data, loading, query_days, history, onChangeQueryTime) => data.map(({value, label, unit, name, record, pathname}, idx) => (

    <Col {...topColResponsiveProps} key={idx}>
      <ChartCard
        style={{marginTop: 12, cursor: 'pointer'}}
        bordered={false}
        loading={loading}
        bodyStyle={{textAlign: 'center', fontSize: 0}}
        title={`${label}`}
        onClick={() => {
          onChangeQueryTime();
          history.push(`/report/${pathname}`)
        }}
        action={
          !name ?
            <Tooltip
              title="只计算运动设备的速度。设备静止时不纳入平均速度计算中。"
            >
              <Icon type="info-circle-o"/>
            </Tooltip> :
            null
        }
        total={<span>{parseInt(value)} <span style={{fontSize: 14}}>{unit}<span
        style={{fontWeight: 200}}> /台</span></span></span>}
        footer={
          !name ? null :
            <Field
              style={{textAlign: "left",}}
              label={
                `日均${label}`
              }
              value={`${(value / query_days) > 10 ? parseInt(value / query_days) : (value / query_days).toFixed(1)} ${unit}`}
            />
        }
        contentHeight={180}
      >
        {
          !name ? (<Gauge
              title={''}
              height={180}
              speed={value.toFixed(2)}
            />) :
            <MiniBar data={formatRecordData(record, name)} height={80}/>
        }
      </ChartCard>
    </Col>

  )
);

const RunningDataCard = memo(
  ({
     rangePickerValue, runningData: {
      query_days,
      running_device_total,
      mileage_total,
      duration_total,
      stay_time,
      mileage_total_record,
      stay_time_record,
      duration_total_record,
    }, isActive, loading, selectDate, history, onChangeQueryTime
}) => (
    <Card
      loading={loading}
      bordered={false}
      style={{marginTop: 24}}
      bodyStyle={{padding: 0}}
      title={
        <FormattedMessage
          id="app.analysis.dashboard.running.data"
        />
      }
      extra={
        <div className={styles.salesExtraWrap} style={{textAlign: 'center',}}>
          < div className={styles.salesExtra}>
            <a className={isActive('7days')} onClick={() => selectDate('7days')}>
              <FormattedMessage id="app.analysis.7days" defaultMessage="All Yesterday"/>
            </a>
            <a className={isActive('30days')} onClick={() => selectDate('30days')}>
              <FormattedMessage id="app.analysis.30days" defaultMessage="All Day"/>
            </a>
          </div>
          {/*<RangePicker*/}
          {/*value={rangePickerValue}*/}
          {/*onChange={handleRangePickerChange}*/}
          {/*style={{width: 256}}*/}
          {/*/>*/}
        </div>
      }
      size="large"
    >

      <Row type="flex" justify="space-around">
        {
          WateWaveCol([
            {
              value: mileage_total / running_device_total / 1000 || 0,
              unit: `公里`,
              label: '里程',
              name: 'mileage_total',
              pathname: 'mileage',
              record: mileage_total_record,
            },
            {
              value: stay_time / running_device_total || 0,
              unit: `次`,
              label: '停留',
              name: 'stay_time',
              pathname: 'stay',
              record: stay_time_record,
            },
            {
              value: parseInt(duration_total / running_device_total / 3600) || 0,
              unit: `小时`,
              label: '运行',
              name: 'duration_total',
              pathname: 'run',
              record: duration_total_record,
            },
            // {
            //   value: `${runningData.usage_rate_avg}`,
            //   unit: `%`,
            //   label: '行驶率'
            // },
            {
              value: (mileage_total / running_device_total / 1000) / (parseInt(duration_total / running_device_total / 3600)) || 0,
              unit: `公里每小时`,
              pathname: 'speed',
              label: '平均速度',
            },
          ], loading, query_days, history, onChangeQueryTime)
        }
      </Row>

    </Card>
  ));

export default RunningDataCard;
